<template lang="html">
  <div class="recommend">
    <router-link to="/detail">
      <div class="recommend-title">
        <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
        猜你喜欢
      </div>
      <ul class="recommend-list">
        <li class="recommend-item border-bottom" v-for="item of recommendList" :key="item.id">
          <div class="rec-img-box">
            <img class="rec-img" :src="item.imgUrl" :alt="item.title">
          </div>
          <div class="rec-info">
            <p class="rec-title">{{item.title}}</p>
            <p class="rec-comment">{{item.comment}}条评论</p>
            <p class="rec-price">
              <span class="rec-price-symbol">¥<em class="rec-preice-con">{{item.price}}</em></span>起
              <span class="rec-address">{{item.address}}</span>
            </p>
          </div>
        </li>
      </ul>
      <div class="all-project">
        查看所有产品
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
  // data () {
  //   return {
  //     recommendList: [{
  //       id: '0001',
  //       imgUrl: 'http://img1.qunarzz.com/sight/p0/1806/4f/4f448c94f180b36da3.water.jpg_200x200_9ef8867f.jpg',
  //       title: '36kr没想到未来城1',
  //       comment: '1条评论',
  //       price: '80',
  //       address: '北京',
  //       desc: '来,茄子'
  //     }, {
  //       id: '0002',
  //       imgUrl: 'http://img1.qunarzz.com/sight/p0/1806/4f/4f448c94f180b36da3.water.jpg_200x200_9ef8867f.jpg',
  //       title: '36kr没想到未来城2',
  //       comment: '1条评论',
  //       price: '80',
  //       address: '北京',
  //       desc: '来,茄子'
  //     }, {
  //       id: '0003',
  //       imgUrl: 'http://img1.qunarzz.com/sight/p0/1806/4f/4f448c94f180b36da3.water.jpg_200x200_9ef8867f.jpg',
  //       title: '36kr没想到未来城3',
  //       comment: '1条评论',
  //       price: '80',
  //       address: '北京',
  //       desc: '来,茄子'
  //     }]
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  .recommend
    color: #333
    .recommend-title
      color: #212121
      font-size: .32rem
      padding: .24rem 0
      img
        display: inline-block
        overflow: hidden
        width: .3rem
        height: .3rem
        margin-left: .2rem
        vertical-align: top
    .recommend-list
      margin-left: .24rem
      .recommend-item
        position: relative
        overflow: hidden
        padding: .2rem 0
        .rec-img-box
          float: left
          overflow: hidden
          width: 2rem
          height: 2rem
          .rec-img
            width: 100%
        .rec-info
          overflow: hidden
          padding-left: .22rem
          .rec-title
            margin-top: .26rem
            height: .44rem
            color: #212121
            font-size: .32rem
            line-height: .44rem
          .rec-comment
            color: #616161
            font-size: .12rem
            line-height: .34rem
            vertical-align: text-bottom
          .rec-price
            position: relative
            margin-top: .22rem
            color: #616161
            font-size: .24rem
            line-height: .4rem
            .rec-price-symbol
              color: #ff8300;
              .rec-preice-con
                font-size: .4rem
            .rec-address
              position: absolute
              right: .24rem
              bottom: 0
    .all-project
      padding: .2rem 0
      color: #00afc7
      font-size: .28rem
      line-height: .4rem
      text-align: center
</style>
